// 函数组件
import React, { useState, useEffect, useContext } from 'react';
import { Input, Button, Select, DatePicker, Table, Switch, Modal, message, ConfigProvider, Collapse, Divider, List, Typography, Space } from 'antd';
// import TagDialog from '../operations/child/TagDialog';
import zh_CN from 'antd/es/locale/zh_CN';
import { DownloadOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import type { TableRowSelection } from "antd/es/table/interface";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import './userCss/UserList.less'
import '../../css/public.less'
import './userCss/BuyPower.less'

const { Panel } = Collapse;
function BuyPower() {
  const navigate = useNavigate();
  interface BuyPowerDataType {
    order: number;
    user_name: string;
    user_account: string;
    user_phone: number;
    reg_time: string;
    user_buy_money: number;
    status: boolean;
  }

  const [size, setSize] = useState<SizeType>('small'); // default is 'middle'
  // 列名
  let flag;
  // 表格列
  const columns: ColumnsType<BuyPowerDataType> = [
    {
      title: "序号",
      dataIndex: "order",
      width: "7%",
      align: "center",
    },
    {
      title: "用户昵称",
      dataIndex: "user_name",
      align: "center",
    },
    {
      title: "用户账号",
      dataIndex: "user_account",
      align: "center",
    },
    {
      title: "手机号",
      dataIndex: "user_phone",
      align: "center",
    },
    {
      title: "注册时间",
      dataIndex: "reg_time",
      align: "center",
    },
    {
      title: "消费金额",
      dataIndex: "user_buy_money",
      align: "center",
    },
    {
      title: "用户可用状态",
      dataIndex: flag,
      align: "center",
      render: (value, record, index) => {
        return <Switch checked={value} />;
      },
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      width: "20%",
      render: (value, record) => (
        <div>
          {/* <button className='edit' onClick={() => clickMod(record)}>查看</button> */}
          <button
            onClick={() => {
              goDetails(value);
            }}
            className="one"
          >

            查看
          </button>
          <button className="edit" >
            编辑
          </button>
          <button className="del">删除</button>
        </div>
      ),
    },
  ];
  // 表格数据
  const buyPowerData: BuyPowerDataType[] = [];
  for (let i = 0; i < 46; i++) {
    let flag = i % 2 === 0 ? true : false;
    buyPowerData.push({
      order: i,
      user_name: "张三",
      user_account: "1234567876234",
      user_phone: 13564766547,
      reg_time: "2023-01-12",
      user_buy_money: 200,
      status: flag,
    });
  }

  const rowSelection: TableRowSelection<BuyPowerDataType> = {
    // selectedRowKeys,
    // onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: "odd",
        text: "Select Odd Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          // setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: "even",
        text: "Select Even Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          // setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  // 是否显示弹窗
  let [showModel, setShowModel] = useState(false)

  // 需发送的查询参数
  const reqData: any = {
    consume_time: '',
    consume_num: '',
    consume_money: '',
    consume_average: '',
    consume_tag: '',
  }
  // 查询选项
  let [consume, setConsume] = useState([
    {
      consume_title: '最近消费',
      consume_content: ['不限', '1周内', '2周内', '1个月内', '1个月前', '2个月前', '3个月前', '6个月前', '自定义'],
      active: 0
    },
    {
      consume_title: '消费次数',
      consume_content: ['不限', '1次以上', '2次以上', '3次以上', '5次以上', '10次以上', '20次以上', '30次以上', '自定义'],
      active: 0
    },
    {
      consume_title: '消费金额',
      consume_content: ['不限', '0~50', '50~100', '101~200', '201~500', '501~1000', '1001~2000', '2000以上前', '自定义'],
      active: 0
    },
    {
      consume_title: '订单均价:',
      consume_content: ['不限', '0~50', '50~100', '101~200', '201~500', '501~1000', '1001~2000', '2000以上前', '自定义']
    },
    {
      consume_title: '用户标签:',
      consume_content: ['不限', '标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5', '标签名称6', '标签名称7']
    }
  ])

  // 筛选查询
  const change = (value: any, index: any, ind: any) => {
    let name = ''
    switch (index) {
      case 0: name = 'consume_time'
        break;
      case 1: name = 'consume_num'
        break;
      case 2: name = 'consume_money'
        break;
      case 3: name = 'consume_average'
        break;
      case 4: name = 'consume_tag'
        break;
    }

    reqData[name] = value;
    consume[index].active = ind;
    if (value !== '自定义') {
      setConsume([...consume])
    } else {
      setShowModel(true)
    }
  }
  // 弹窗确认函数
  const handleOk = () => {
    setShowModel(false)
  }

  // 弹窗取消函数
  const handleCancel = () => {
    setShowModel(false)
  }




  //点击跳转详情页面
  const goDetails = (value: {}) => {
    navigate("/home/user/userDetails");
  };


  //自定义弹框下拉选项
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };


  return (
    <div className='BuyPower'>
      {/* 头部 */}
      <div className='page-top'>
        {/* 左边标题 */}
        <div className='page-title'>
          <p>购买力筛选</p>
        </div>
      </div>

      {/* 内容区 */}
      <div className='page-context'>
        <Collapse defaultActiveKey={['1']} expandIconPosition={'end'} style={{ marginBottom: '20px' }}>
          <Panel header="筛选查询" key="1">
            <div className='FilterQuery'>
              {consume.map((item, index) => {
                return (
                  <div key={item.consume_title} className='search-box'>
                    <div className='search-title'>{item.consume_title}:</div>
                    <div className='search-content'>
                      {item.consume_content.map((ite: any, ind: any) => {
                        return (
                          <div className={["search-text", item.active === ind ? "active" : null].join(' ')} style={{ color: (ite === '0') ? 'blue' : '' }} key={ite} onClick={() => change(ite, index, ind)}>{ite}</div>
                        )
                      })}
                    </div>
                  </div>
                )
              })}
            </div>
          </Panel>
        </Collapse>
        {/* 表格部分 */}
        <div className="data-list">
          <div className="list-title">
            <p>数据列表</p>
            <div className="list-operation">
              <div className="operation-one">
                <p>排序方式</p>
                <Select
                  className="select-shelf"
                  placeholder="排序方式"
                  style={{ width: 120 }}
                  allowClear
                  options={[
                    { value: "lucy", label: "按时间倒序" },
                    { value: "bm", label: "按时间顺序" },
                  ]}
                />
              </div>
              <div>
                <button className="batch-del">批量删除</button>
                <button className="add">添加</button>
              </div>
            </div>
          </div>

          {/* 表格部分 */}
          <ConfigProvider locale={zh_CN}>
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={buyPowerData}
              scroll={{ y: 270 }}
              rowKey={(item) => item.order}
              pagination={{
                position: ["bottomCenter"],
                defaultPageSize: 10,
                pageSizeOptions: [3, 5, 10, 15],
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          </ConfigProvider>
        </div>
        {/* 弹框 */}
        <Modal title="最近消费" open={showModel} onOk={handleOk} onCancel={handleCancel}>
          <div className='userDefined'>
            <Space wrap>
              <Select
                defaultValue="lucy"
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: 'jack', label: '一周内' },
                  { value: 'lucy', label: '两周内' },
                  { value: 'Yiminghe', label: '一个月内' },
                  { value: 'disabled', label: '一个月前', disabled: true },
                ]}
              />

              <p>到</p>
              <Select
                defaultValue="lucy"
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: 'jack', label: '一周内' },
                  { value: 'lucy', label: '两周内' },
                  { value: 'Yiminghe', label: '一个月内' },
                  { value: 'disabled', label: '一个月前', disabled: true },
                ]}
              />
            </Space>
          </div>
        </Modal>
      </div>
    </div>
  )
}

export default BuyPower



